<template>
  <div>
<!--    顶部登录logo-->
   <el-row class="top_login">
       <el-col :offset="3" :span="3"><el-image class="logo_img" src="http://s02.mifile.cn/assets/static/image/mi-logo.png"/>
       </el-col>
       <el-col  :span="10" :pull="1"><div class="login_title">小米商城</div></el-col>
   </el-row>

<!--    中间登录部分-->
    <el-row class="bottom_content">
      <el-col class="content_title" :span="3" :offset="3">
        <div class="title">小米11</div>
        <div class="content">2021 轻装上阵</div>
      </el-col>

      <el-col class="content_img" :span="6" :offset="0">
<!--        <el-image src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section1-1.jpg"></el-image>-->
      </el-col>

      <el-col class="right_content" :span="6" :offset="3">
        <el-col class="form_title" :span="10" :offset="6">账号登录</el-col>
<!--        <div class="form_title">账号登录</div>-->
        <el-form :model="loginMessage">
          <el-form-item label="">
            <el-col :span="20" :offset="2">
              <el-input v-model="loginMessage.username" :placeholder="loginPlaceholder.usernameContent"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="">
            <el-col :span="20" :offset="2">
              <el-input v-model="loginMessage.password" :placeholder="loginPlaceholder.passwordContent" type="password"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="">
            <el-col :span="20" :offset="2">
                <el-button type="warning" class="button_click" @click="loginBtnClick">{{loginClickContent}}</el-button>
            </el-col>
<!--            <el-col :span="20" :offset="2">-->
<!--              <el-button type="warning" class="button_click" @click="test">test</el-button>-->
<!--            </el-col>-->
            <el-col :offset="3">
                <el-link :underline="false" class="register_button" type="warning" @click="registerButtonClick">{{loginClickContentBottom}}
                <i class="el-icon-s-custom"></i>
                </el-link>
            </el-col>
          </el-form-item>
          <el-row class="bottom_icon">
            <el-col :offset="8" :span="1">
              <i class="el-icon-s-promotion"></i>
            </el-col>
            <el-col :offset="1" :span="1"> <i class="el-icon-document-copy"></i></el-col>
            <el-col :offset="1" :span="1"> <i class="el-icon-shopping-cart-full"></i></el-col>
            <el-col :offset="1" :span="1"> <i class="el-icon-mobile-phone"></i></el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {login} from 'network/login'
  import {request} from "../../network/request";
  import Element from 'element-ui';

  export default {
    name: "Login",

    data(){
      return{
        //登录表单验证信息
        loginMessage:{
          username: '',
          password: ''
        },
        //是否为注册/登录
        isRegister: false,
        token: '',
      }
    },
    computed:{
      loginClickContent(){
        return this.isRegister? '登录/注册': '登录'
      },
      loginClickContentBottom(){
        return this.isRegister? '用户名密码登录':'注册'
      },
      loginPlaceholder(){
        return this.isRegister? {
          usernameContent: '注册用户名',
          passwordContent: '注册密码'
        }:{
          usernameContent: '邮箱/手机号码/小米ID',
          passwordContent: '密码'
        }
      }
    },
    methods:{
        registerButtonClick(){
          this.isRegister = !this.isRegister;
          console.log('注册')
        },

      //封装登录发送请求方法
      login(that){
          let result = {};
        login({
          url: '/user/login',
          params: {
            // 请求携带参数
            username:that.loginMessage.username,
            password:that.loginMessage.password
          }
        }).then(res=>{
          // console.log(res);
          console.log(res.data);
          result = res.data;
          //登录接口访问成功后， 发送commit，通知vuex和本地localStroe存储token信息
          this.$store.commit('login',{
            username: result.data.username,
            userId: result.data.userId,
            token: result.data.token,
          });

          //登录成功后， 发送请求（获取该用户的购物车数量, 放在vuex里面， 默认为0）
          request({
            url: '/shopcart/count',
            params:{
              userId: this.$store.state.userId,
            }
          }).then(res => {
            this.$store.commit('setShopcartCount', res.data.data);
          });

          this.$router.push({
            path: '/index',
            query: {
              username: this.loginMessage.username, //跳转路由带username参数信息
            }
          })
        })
      },

      //注册成功后， 响应弹窗的方法
      registerAlert(username){
          Element.Alert({
            confirmButtonText: '确定',
            title: '用户操作',
            content: username + '注册成功',
            type: 'success'
          });
      },

      // 登录方法 or 注册
      loginBtnClick(){
        let that = this;
        let result = {};
        console.log('登录跳转');
        // this.$router.push('/index');

        //登录的情况：
        if(!this.isRegister){
          this.login(that);
        }else{
          // isRegister == false.  注册并登录的情况：
          console.log(that.loginMessage);
          login({
            url: '/user/register',
            method: 'post',
            data: that.loginMessage
          }).then(res=>{
            //注册成功后，访问登录接口， 跳转登录页面， 存放token和本地localStore信息
            that.login(that);
          })
        }

      },

      test(){
          request({
            url: '/user/test'
          }).then(res=>{
            console.log(res)
          })
      }
    }
  }
</script>

<style>
  .top_login{
    background-color: #fff;
  }
  .logo_img{
   background-color:  #FF6700;
    width: 55px;
    height: 55px;
    /*margin-top: 22px;*/
 }
  .top_login .el-col{
     margin-top: 22px;
   }
  .top_login{
    min-height: 99px
  }

  .login_title{
    color: #353535;
    font-size: 25px;
    height: 55px;
    line-height: 55px;
  }

  .bottom_content{
    height: 588px;
    background-color: #DAE6F2;
    /*background: url(https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section1-1.jpg) no-repeat;*/
   background-position: center;
    background-size:100% 100%;
  }

  .content_title .title{
    color: #000;
    font-size: 50px;
    margin-top: 230px;
  }
  .content_title .content{
    font-size: #6F767E;
    margin-top: 10px;
  }
  .content_img{
    /*width: 500px;*/
    height: 210px;
    background: url(../../assets/img/login/Mi11.png) center;
    background-size:100% 100%;
    margin-top: 180px;
  }

  .right_content{
    background-color: white;
    height: 500px;
    margin-top: 88px;
  }

  .form_title{
    text-align: center;
    color: #FF6700;
    font-size: 30px;
    margin-top: 70px;
    margin-bottom: 50px;
  }

  .right_content .el-input__inner{
    height: 50px;
  }

  .button_click{
    height: 50px;
    width: 100%;
  }

  .bottom_icon{
    margin-top: 60px;
    color: #9999B3;
  }
</style>
